<template>
  <div>
    <el-dialog
      title="供应商详情"
      :visible.sync="diaVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label="供应商编码" prop="coding">
              <el-input v-model="ruleForm.coding"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label="供应商名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model.number="ruleForm.phone"
                ref="ruleForm.phone"
                @input="limitOrder"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="供应商地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10"
            ><el-form-item label="传真" prop="straight">
              <el-input v-model="ruleForm.straight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14"
            ><el-form-item label="银行资料" prop="bank">
              <el-input
                v-model="ruleForm.bank"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                maxlength="19"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="邮件地址" prop="site">
              <el-input v-model="ruleForm.site"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save2()">保存</el-button>

          <el-button @click="diaVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Newtable2',
  data() {
    return {
      diaVisible: false,
      ableData: {},
      ruleForm: {
        coding: '',
        name: '',
        contact: '',
        phone: '',
        address: '',
        straight: '',
        bank: '',
        site: '',
        remark: '',
      },
      rules: {
        coding: [
          { required: true, message: '请输入供应商编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { max: 20, message: '长度在 20个字符内', trigger: 'blur' },
        ],
        contact: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { type: 'number', message: '电话必须为数字值', trigger: 'change' },
        ],
        address: [
          {
            required: true,
            message: '请输入地址',
            trigger: 'blur',
          },
        ],
        straight: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        bank: [{ required: true, message: '请填写银行资料', trigger: 'blur' }],

        site: [{ required: true, message: '请填写emali资料', trigger: 'blur' }],
      },
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    limitOrder() {
      // 要做长度判断
      console.log(this.ruleForm.phone)
      let lsz_str = String(this.ruleForm.phone)
      if (lsz_str.length > 11) {
        lsz_str = lsz_str.substr(0, lsz_str.length - 1)
        console.log(lsz_str.length)
        this.ruleForm.phone = Number(lsz_str)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //编辑请求
    save2() {
      this.$axios
        .post('/supply/updeteSupply', this.ruleForm)
        .then((res) => {
          console.log('这是更新请求',res)
          this.diaVisible = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
